<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>上下滚动阴影</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    /* html,
    body {
        width: 100%;
        height: 100%;
    } */

    .box{
        margin:0 auto;
        text-align: center;
    }
    .box ul{
        overflow: auto;
        height: 200px;
        padding: 10px;
        background: linear-gradient(white,transparent),radial-gradient(at 50% 0,rgba(0,0,0,0.2),transparent 70%), linear-gradient(transparent,white),radial-gradient(at 50% 100%,rgba(0,0,0,0.2),transparent 70%);
        background-repeat: no-repeat;
        background-attachment: local,scroll,local,scroll;
        background-size: 100% 50px,100% 15px,100% 50px,100% 15px;
        background-position: top,top,bottom,bottom;
    }
</style>

<body>
    <div class="box">
        <ul>
            <li>哈哈哈哈哈哈哈first</li>
            <li>哈哈哈哈哈哈哈</li>
            <li>哈哈哈哈哈哈哈</li>
            <li>哈哈哈哈哈哈哈</li>
            <li>哈哈哈哈哈哈哈</li>
            <li>哈哈哈哈哈哈哈</li>
            <li>哈哈哈哈哈哈哈</li>
            <li>哈哈哈哈哈哈哈</li>
            <li>哈哈哈哈哈哈哈</li>
            <li>哈哈哈哈哈哈哈</li>
            <li>哈哈哈哈哈哈哈</li>
            <li>哈哈哈哈哈哈哈</li>
            <li>哈哈哈哈哈哈哈</li>
            <li>哈哈哈哈哈哈哈</li>
            <li>哈哈哈哈哈哈哈</li>
            <li>哈哈哈哈哈哈哈</li>
            <li>哈哈哈哈哈哈哈</li>
            <li>哈哈哈哈哈哈哈</li>
            <li>哈哈哈哈哈哈哈</li>
            <li>哈哈哈哈哈哈哈</li>
            <li>哈哈哈哈哈哈哈</li>
            <li>哈哈哈哈哈哈哈</li>
            <li>哈哈哈哈哈哈哈</li>
            <li>哈哈哈哈哈哈哈</li>
            <li>哈哈哈哈哈哈哈</li>
            <li>哈哈哈哈哈哈哈</li>
            <li>哈哈哈哈哈哈哈</li>
            <li>哈哈哈哈哈哈哈</li>
            <li>哈哈哈哈哈哈哈</li>
            <li>哈哈哈哈哈哈哈</li>
            <li>哈哈哈哈哈哈哈</li>
            <li>哈哈哈哈哈哈哈</li>
            <li>哈哈哈哈哈哈哈</li>
            <li>哈哈哈哈哈哈哈</li>
            <li>哈哈哈哈哈哈哈</li>
            <li>哈哈哈哈哈哈哈last</li>
        </ul>
    </div>
</body>
<script>
</script>
</html>